<template>
	<view>
		<view class="list">
			<view class="person">
				<view class="head_img">
					<image :src="userobj.userinfo.avatar || '../../static/image/bg_img.png'" @click="detailsData"></image>
				</view>
			</view>
			<view class="details">
				<view class="d1">
					<view class="name">{{userobj.userinfo.nickname}}</view>
					<image v-if="userobj.userinfo.gender == 2" class="sex" src="../../static/image/nv_29.png"></image>
					<!-- 男 -->
					<image v-if="userobj.userinfo.gender == 1" class="sex" src="../../static/image/nan.png"></image>
				</view>
				<view class="note">昵称：{{userobj.userinfo.nickname}}</view>
			</view>
		</view>
		<view class="list shanchu" v-if="userobj.is_friendok == 1" @click="del(userobj.userinfo.id)">删除好友</view>
		<view class="list shanchu" v-if="userobj.is_friendok == 2" style="color: #09BB07" @click="shenqing(userobj.userinfo.id)">添加到通讯录</view>
		<img src="../../static/image/faxiaoxi_29.png" v-if="userobj.is_friendok == 1" @click="chats" class="faxiaoxi" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				switchA: false,
				friend_id: '',
				arr:'',
				imgs:[],
				urls:this.$common.baseUrl,
				userobj: '',
				source: ''
			}
		},
		onShow(){
			this.$msgchat.initwork();
		},
		onLoad(option){
			this.friend_id = option.friend_id;
			this.source = option.ty;
			this.initDat();
		},
		methods: {
			initDat(){
				this.$common.requests('/api/friend/is_friend',{uid: this.friend_id}).then(res => {
					if(res.data.code == 1){
						if(res.data.data.userinfo.avatar){
							res.data.data.userinfo.avatar = this.$common.baseUrl + res.data.data.userinfo.avatar;
						}
						this.userobj = res.data.data;	
					}
				})
			},
			//朋友圈
			// pCircle(){
			// 	uni.navigateTo({
			// 		url: '/pages/friendCircle/othersfriendCircle?friend_id='+ this.friend_id +'&nickname=' + this.arr.nickname
			// 	})
			// },
			//发消息
			chats(){
				uni.navigateTo({
					url:'../HM-chat/HM-chat?friend_id='+this.friend_id + '&nickname=' + this.userobj.userinfo.nickname
				})
			},
			//预览
			detailsData(){
				if(this.userobj.userinfo.avatar){
					let imageList = [this.userobj.userinfo.avatar];
					uni.previewImage({
						current: this.userobj.userinfo.avatar,
						urls: imageList
					});
				}
			},
			//申请好友
			shenqing(){
				this.$common.requests('/api/Friend_add/add',{friend_id: this.friend_id, source: this.source}).then(res => {
					this.$api.msg(res.data.msg)	
				})
			},
			//删除好友
			del(id){
				var that = this;
				uni.showModal({
				    title: '',
				    content: '确定删除该好友吗？',
				    success: function (res) {
				        if (res.confirm) {
				            var obj = {
				            	id : id
				            }
				            that.$common.requests('/api/friend/frienddel', obj).then(res => {
				            	if(res.data.code == 1){
				            		that.$api.msg(res.data.msg);
									var jsonstr = {
										uid: this.friend_id,
										type: 'shanchufriend'
									}
									var arrstr = JSON.stringify(jsonstr);
									uni.sendSocketMessage({
									  data: arrstr
									});
				            		setTimeout(() => {
				            			uni.switchTab({
				            				url:'../index/index'
				            			});
				            		}, 1000)
				            	}
				            })
				        } 
				    }
				});
			}
		}
	}
</script>

<style>
	page {
		width: 100vw;
		background: #F5F4F9;
	}

	.list {
		background: #FFF;
		padding: 25upx 30upx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		border-top: 1px solid #E8E8E8;
		border-bottom: 1px solid #E8E8E8;
	}
	.list2 {
		justify-content: space-between!important;
		margin-top: 25upx;
		padding: 30upx;
	}

	.list2 {
		display: flex;
		justify-content: flex-start;
	}

	.person {
		width: 25%;
		text-align: center;
	}

	.head_img {
		width: 80%;
		padding-top: 80%;
		position: relative;
		left: 10%;
	}

	.head_img image {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 99;
		border-radius: 50%;
	}

	.d1{
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}
	.name{
		font-size: 35upx;
	}
	.sex{
		width: 30upx;
		height: 30upx;
		margin: 0 10upx;
	}
		
	.note{
		font-size: 30upx;
		color: #838383;
		padding-top: 5upx;
	}

	.fanhui {
		width: 20upx;
		height: 30upx;
	}
.shanchu{
	margin-top: 25upx;
	padding: 35upx 30upx;
	justify-content: center;
	color: #E3246E;
}
.faxiaoxi {
		width: 90%;
		height: 80upx;
		margin: 10% 5%;
	}
	.quans{
		padding: 0 30upx;
	}
	.quansa{
		padding: 10upx 0;
	}
	.quansb{
		padding-left: 30upx;
	}
	.quan{
		width: 100upx;
		height: 100upx;
		margin-left: 10upx;
	}
</style>
